<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1">
		<title>添加客户</title>			
		<link rel="stylesheet" type="text/css" href="/azxcrm/css/wap/mui.min.css" th:href="@{/azxcrm/css/wap/mui.min.css}"/>
		<link rel="stylesheet" type="text/css" href="/azxcrm/css/wap/mui.picker.min.css" th:href="@{/azxcrm/css/wap/mui.picker.min.css}"/>
		<link rel="stylesheet" type="text/css" href="/azxcrm/css/wap/aui.css" th:href="@{/azxcrm/css/wap/aui.css}" />
		<link rel="stylesheet" type="text/css" href="/azxcrm/css/wap/add_customer.css" th:href="@{/azxcrm/css/wap/add_customer.css}"/>
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_835360_5n3z54a5m1.css"/>
		<script src="/azxcrm/js/wap/mui.min.js" th:src="@{/azxcrm/js/wap/mui.min.js}" type="text/javascript" charset="utf-8"></script>
		<script src="/azxcrm/js/wap/mui.picker.min.js" th:src="@{/azxcrm/js/wap/mui.picker.min.js}" type="text/javascript" charset="utf-8"></script>
		<script src="/azxcrm/js/wap/city.data-3.js" th:src="@{/azxcrm/js/wap/city.data-3.js}" type="text/javascript" charset="utf-8"></script>
		<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
		<script th:inline="javascript"> var ctx = [[@{/}]]; </script>
	</head>
	<body>
		<header class="aui-bar aui-bar-nav">
			 <a href="javascript:history.back(-1)" class="aui-pull-left aui-btn">
	       		 <span class="iconfont icon-fanhui1">返回</span>
	    	</a>
		    <div class="aui-title">添加客户</div>
		</header>
		
		<section class="aui-grid aui-margin-b-15">
			<div class="aui-content aui-margin-b-15">
			<form id="add_Customer">
			    <ul class="aui-list aui-list-in">			       
					<li class="aui-list-item">
			            <div class="aui-list-item-inner">
			                <div class="aui-list-item-label">真实姓名：</div>
			                <div class="aui-list-item-input">
			                    <input type="text" id="customerName" name="customerName" placeholder="请输入姓名">
			                </div>
			            </div>
					</li>
					<li class="aui-list-item">
			            <div class="aui-list-item-inner">
			                <div class="aui-list-item-label">手机号码：</div>
			                <div class="aui-list-item-input">
			                    <input type="text" id="customerCellphone" name="customerCellphone" placeholder="请输入手机号码"  >
			                </div>
			            </div>
					</li>	
					<li class="aui-list-item">
			            <div class="aui-list-item-inner">
			                <div class="aui-list-item-label">性别：</div>
			                <div class="aui-list-item-input">
			                    <input type="text" id="customerSex" placeholder="请选择性别男/女">
			                </div>
			            </div>
					</li>
					<li class="aui-list-item">
			            <div class="aui-list-item-inner">
			                <div class="aui-list-item-label">年龄：</div>
			                <div class="aui-list-item-input">
			                    <input type="number" id="customerAge" name="customerAge" placeholder="请输入年龄">
			                </div>
			            </div>
					</li>
					<li class="aui-list-item">
			            <div class="aui-list-item-inner">
			                <div class="aui-list-item-label">身份证号：</div>
			                <div class="aui-list-item-input">
			                    <input type="text" id="customerIdentityNum" name="customerIdentityNum" placeholder="请输入身份证号码">
			                </div>
			            </div>
					</li>
<!--有问题需解决 -->
					<li class="aui-list-item">
			            <div class="aui-list-item-inner">
			                <div class="aui-list-item-label">所在地：</div>
			                <div class="aui-list-item-input">
			                    <input type="text" id="city" placeholder="请输入所在地">	
			                    <input type="hidden" id="customerProvince" name="customerProvince" />		   
			                    <input type="hidden" id="customerCity" name="customerCity" />	
			                    <input type="hidden" id="customerArea" name="customerArea" />	              
			                </div>
			            </div>
					</li>
					<li class="aui-list-item">
			            <div class="aui-list-item-inner">
			                <div class="aui-list-item-label">详细地址：</div>
			                <div class="aui-list-item-input">
			                    <input type="text" id="customerAddressDetail" name="customerAddressDetail" placeholder="请输入详细地址">
			                </div>
			            </div>
					</li>
			    </ul>
				<div class="aui-bar" id="footer">
					<input type="hidden" id="clueSource" name="clueSource" th:value="4"/>		
					<input type="hidden" id="typeId" name="typeId" th:value="15"/>	
					<input type="hidden" id="isHandle" name="isHandle" th:value="1"/>	
					<input type="hidden" id="customerSexs" name="customerSex"/>	
					<input type="hidden" id="clueOperationType" name="clueOperationType" th:value="0">
		            <button type="button" class="aui-bar" id="toastBtn" onclick="return check(this.form)">确认添加 </button>   		               
			   </div>
			   </form>
			</div>
		</section>
	</body>
</html>

<script>
	var sex = document.getElementById('customerSex');
	var city = document.getElementById("city");
	var sex_data= new mui.PopPicker();
			sex_data.setData([{
						value: '1',
						text: '男',
					}, {
						value: '2',
						text: '女',
					}
				])
		sex.addEventListener('tap', function() {
			sex_data.show(function(items) {
				sex.value = items[0].text;
				document.getElementById('customerSexs').value = items[0].value;
				//返回 false 可以阻止选择框的关闭
				//return false;
			});
		}, false);	
		 var picker = new mui.PopPicker({layer: 3 });
           	picker.setData(cityData3)
			city.addEventListener('tap', function() {			
				 picker.show(function(items) {
			        city.value = items[0].text+'-'+items[1].text+'-'+items[2].text;		
			        document.getElementById('customerProvince').value = items[0].text;
			        document.getElementById('customerCity').value = items[1].text;
			        document.getElementById('customerArea').value = items[2].text;
			        
			      });
			})		

       	function check(form) {
           var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
       	   if(form.customerName.value==''){
               mui.toast('姓名必填');
                 form.customerName.focus();
                 return false;
              }else if(!myreg.test(form.customerCellphone.value)) {                
                mui.toast('手机号码错误');
                  form.customerCellphone.focus();
                  return false;
             }else{
            	$.ajax({
         		cache : true,
         		type : "POST",
         		url : ctx + "/wap/customer/saveCustomer",
         		data : $("#add_Customer").serialize(),
         		async : false,
         		error : function(request) {
         			 mui.toast("系统错误", "error");
         		},
         		success : function(data) {
         			if (data.code == 0) {
         				mui.toast("添加成功");          				
         				$("#toastBtn").removeAttr("onclick");
           		    	    setTimeout(function(){
           		    	    	window.location.href= ctx + "wap/wapCustomer"
            		    	    },2200) 
         			} else {
         				mui.toast("添加失败");
         			}
         		}
         		});
             }     
       }
</script>